<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <link rel="stylesheet" href="../css/layui.css">
        <script src="../layui.js"></script>
    </head>
    <body class="layui-layout-body">
        <div class="layui-layout">
            <div class="layui-side">
                <div class="layui-side-scroll">
                    <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
                    <div id="tree"></div>
                </div>
            </div>

            <div class="layui-body">
                <!-- 内容主体区域 -->
                <table id="userTab"></table>
            </div>


        </div>


        <!--   操作按钮 -->
        <script type="text/html" id="bar_menu">
        <a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>
        <!-- 表格的数据信息 -->
        <script type="text/html" id="toolbarDemo">
        <div class="layui-btn-container">
          <button class="layui-btn layui-btn-sm" lay-event="getCheckData">添加数据</button>
        </div>
      </script>
        <script>
    //JavaScript代码区域
    layui.use(['element','tree','table'], function(){
      var element = layui.element;
      var tree = layui.tree;
      var table = layui.table;
      

        //渲染
        var inst1 = tree.render({
            elem: '#tree'  //绑定元素
            ,data: [{
                title: '江西' //一级菜单
                ,children: [{
                title: '南昌' //二级菜单
                ,children: [{
                    title: '高新区' //三级菜单
                    //…… //以此类推，可无限层级
                }]
                }]
            },{
                title: '陕西' //一级菜单
                ,children: [{
                title: '西安' //二级菜单
                }]
            }]
            ,click:function(obj){
                console.log(obj.data); //得到当前点击的节点数据
    console.log(obj.state); //得到当前节点的展开状态：open、close、normal
    console.log(obj.elem); //得到当前节点元素
    
    console.log(obj.data.children); //当前节点下是否有子节点
            }
            
            });

            var mydata = [
                    {id:101,name:'无语',username:'admin',sex:'男',role:'ceo'}
                ];
            //第一个实例
            table.render({
                        elem: '#userTab'
                        ,height: 400
                        ,data: mydata //数据接口
                        ,page: true //开启分页
                        ,toolbar:'#toolbarDemo'
                        ,cols: [[ //表头
                        {field: 'id', title: '编号', sort: true}
                        ,{field: 'icon', title: '头像'} 
                        ,{field: 'name', title: '姓名'} 
                        ,{field: 'username', title: '用户名'}
                        ,{field: 'sex', title: '性别'}
                        ,{field: 'role', title: '职位'}
                        ,{title: '操作',toolbar:'#bar_menu',fixed:'right'}
                        ]]
                    });

    });
    </script>
    </body>
</html>